<!DOCTYPE html>
<html>
	{include file="head.html"}
	 
	<style>
		.list:after{
			clear: both;
			content: ".";
			visibility: hidden;
			height: 0;
		}
		.list .item{
			border: 1px solid #eee; 
			width: 200px;
			text-align: center;
			box-sizing: border-box;
			padding: 5px;
			margin-bottom: 20px; 
			
		}
		.list .item .img{
			margin-bottom: 5px;
		}
		.list  .img img{
			width: 100%;
		}
		.list .item .title{
			margin-bottom: 5px;
			color: #333;
			font-size: 14px;
		}
		.list .item .dos a{
			color: #666;
			font-size: 14px;
		}
	</style>
	<body>
		 <ul class="nav nav-tabs">
    	<li class="active"><a href="{$appadmin}?m=uicompent">组件管理</a></li>
        <li><a href="{$appadmin}?m=uicompent&a=add">组件添加</a></li>
    </ul>
    <div class="rbox">
    	<div class="list">
    		{foreach item=c from=$data}
    		<div class="item">
    			<div class="img">
    				<img src="{$c.imgurl|images_site}.small.jpg"  />
    			</div>
    			<div class="title">{$c.title}</div>
    			<div class="dos">
    				<a href="/admin.php?m=uicompent&a=add&id={$c.id}">编辑</a>
    				&nbsp;&nbsp;
					<a href="javascript:;" class="js-delete" url="/admin.php?m=uicompent&a=delete&id={$c.id}">删除</a>
    			</div>
    		</div>
    		{/foreach}
    	</div>
    	 
    </div>
    {include file="footer.html"}
    <script src="/plugin/jquery/masonry.pkgd.min.js"></script>
	<script src="/plugin/jquery/imagesloaded.pkgd.min.js"></script>
    <script>
			$(function(){
				var $grid=$(".list");
				$grid.imagesLoaded( function() {
				  $grid.masonry({	  
				  	itemSelector: '.item',
				  	columnWidth: 210
				  });
				});
			})
    	
    </script>
	</body>
</html>
